@base:50rem;
*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
     -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color:rgba(255,0,0,0) 
}
body{
    overflow-x:hidden ;
}
.wrapper{
   height: 100%;
}
html,body{
   height: 100%;
}
.clear::after{
    content: '';
    display: block;
    clear: both;
}
a{
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(255,0,0,0) 
}
img{
    width: 100%;
    height: 100%;
}
div{
    cursor: pointer;
}
li{
    list-style: none;
    cursor: pointer;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}
span{
    cursor: pointer;
}
input[type=submit],input[type=reset],input[type=button],input[type=text]{
    -webkit-appearance:none;
    outline: none;
}
::-webkit-input-placeholder {
   /* WebKit browsers */
    color: #ccc;
}
:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
    color: #ccc;
}
::-moz-placeholder {
   /* Mozilla Firefox 19+ */
    color: #ccc;
}
:-ms-input-placeholder {
   /* Internet Explorer 10+ */
    color: #ccc;
}
.blue{
    /*border-bottom: 4/@base solid #4285f4;*/
    color: #4285F4 !important;
}.header{
    width: 764/@base;
    height: 315/@base;
    background-color: #4285f4;
    overflow: hidden;
}
.header{ background: url(../img/our_bg.png) no-repeat; background-size: 100% 100%; position: relative; }
.head_con{
    width: 670/@base;
    height: 132/@base;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -7.1521739130434785rem;
    margin-top: -1.4130434782608696rem;
}
.head_fl{
    float: left;
    height: 132/@base;
    width: 132/@base;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30/@base;
}
.head_cc{
    float: left;
    width: 487/@base;
    height: 132/@base;
}
.head_cc p{
    height: 69/@base;
    line-height: 69/@base;
    font-size: 30/@base;
    color: white;
    width:100% ;
}
.headc_font{
    width: 100%;
    height: 32/@base;
    line-height: 32/@base;
    font-size: 22/@base;
    color: white;
}
.headc_font span{
   float: left;
   width: 88/@base;
   height: 32/@base;
   line-height: 32/@base;
   text-indent: 36/@base;
   background: url(../img/our.png) no-repeat -0rem -118/@base;
   background-size: 32/@base;
}
.lines{
    width: 4/@base;
    height: 26/@base;
    background-color: white;
    margin-right: 19/@base;
    float: left;
}
.headc_font a{
   float: left;
   width: 88/@base;
   height: 32/@base;
   color: white;
   text-indent: 34/@base;
   background: url(../img/book.png) no-repeat 0rem;
   background-size: 25/@base;
}
.head_rt{
    width: 19/@base;
    height: 132/@base;
    line-height: 132/@base;
    float: left;
}
.head_rt img{
    width: 18/@base;
    height: auto;
}

.conten{
    width: 764/@base;
    padding: 26/@base 0 87/@base 0;
    box-shadow: 0rem 2/@base 19/@base 0rem rgba(66, 133, 244, 0.27);
}
.din_con{
    border-bottom: 2px solid #f5f5f5;
    width: 722/@base;
    height:4.565217391304348rem;
    margin: 0 auto;
}
.dinc_fl{
    width: 231/@base;
    height: 149/@base;
    float: left;
    border-radius:0.21739130434782608rem;
    overflow: hidden;
    margin: 34/@base 22/@base 0 17/@base;
}
.dinc_rt{
    width: 426/@base;
    height: 149/@base;
    float: left;
    margin-top: 34/@base;
}
.dinc_rt p{
    width: 100%;
    height: 51/@base;
    line-height: 51/@base;
    font-size: 34/@base;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.dinc_rt span{
    display: block;
    height: 48/@base;
    line-height: 48/@base;
    font-size: 30/@base;
    color: #4c4c4c;
}
.dincc{
    width: 100%;
    height: 48/@base;
}
.price{
    font-size: 28/@base;
    color: #f69f07;
    float: left;
    height: 48/@base;
    line-height: 59/@base;
}
.study{
    float: right;
    width: 146/@base;
    height: 48/@base;
    border-radius: 5/@base;
    background: #4285F4;
    font-size: 30/@base;
    color: white;
    text-align: center;
    line-height: 48/@base;
}
.time{
    height: 61/@base;
    line-height: 61/@base;
    margin-left:0.3695652173913043rem;
    font-size: 22/@base;
    color: #777777;
    float: left;
}
.code{
    width: 764/@base;
    height: 240/@base;
    margin-bottom: 20/@base;
    position: relative;
}
.code_con{
    width: 613/@base;
    height: 91/@base;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.9782608695652174rem;
    margin-left: -6.543478260869565rem;
}
.tex{
    width: 505/@base;
    height: 86/@base;
    font-size: 36/@base;
    text-indent: 9/@base;
    border: 2px solid #dfdfdf;
    border-radius: 5/@base;
    float: left;
}
.code_btn{
    width: 105/@base;
    height:90/@base;
    float: left;
    margin-left: -0.18rem;
    background: #4285F4;
    color: white;
    font-size: 36/@base;
    border: 0;
    border-radius: 0 5/@base 5/@base 0;
}


footer{
    width: 100%;
    height: 101/@base;
    position: fixed;
    bottom: 0;
    background: white;
    z-index: 2;
    box-shadow: 0px 2px 19/@base 0px rgba(66, 133, 244, 0.2);
}
footer dl{
    width: 25%;
    height: 100%;
    text-align: center;
    float: left;
}
footer dl dt{
    width: 100%;
    height: 34/@base;
    margin-top: 19/@base;
    overflow: hidden;
}
footer dl img{
    display: block;
    margin:0 auto ;
}
footer dl dd{
    line-height: 40/@base;
    height: 40/@base;
    width: 100%;
    text-align: center;
    color: #999999;
    font-size: 22/@base;
}
footer dl:first-child img{
   width: 1rem;
   height: 40/@base;
}
footer dl:nth-child(2) img{
    width: 36/@base;
    height: 33/@base;
}
footer dl:nth-child(3) img{
   width: 40/@base;
   height: 39/@base;
}
footer dl:last-child img{
   width: 40/@base;
   height: 44/@base;
}
.message{
    color: #4d4d4d;
    height: 25/@base;
    font-size: 22/@base;
    line-height: 25/@base;
    position: absolute;
    left: 50/@base;
    top: 180/@base;
}
